<template>
    <el-card>
        <Components title="进入交易用户数" value="182,425">
            <v-chart :option="getOption()" />
            <template #footer>
                <span>退货率</span>
                <span class="emphasis">5.91%</span>
            </template>
        </Components>
    </el-card>
</template>

<script lang="ts">
import Components from './Components.vue'
export default {
    name: 'TodayUsers',
    components: {
        Components
    }
}
</script>
<script lang="ts" setup>
import { computed } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/userForm'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()

// 交易数
const orderUser = computed(() => reportDataStore.reportData.orderUser)
// 退货率
const returnRate = computed(() => reportDataStore.reportData.returnRate)
// 销量
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
// 时间
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)

const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            data: orderUserTrendAxis.value,
            boundaryGap: false,
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [
            {
                name: '实时交易量',
                barWidth: '60%',
                data: orderUserTrend.value,
                type: 'bar'
            }
        ],
        grid: {
            left: 5,
            top: 0,
            bottom: 0,
            right: 5
        },
        color: ['#3398DB'], // 柱的颜色
        tooltip: {
            trigger: 'axis',
        }
    };
}
</script>
<style>
</style>